/**
 * 关于如何才能让 obj 变成响应式数据发现的两点线索:
 *  当副作用函数 effect 执行时，会触发字段 obj.text 的读取操作；
 *  当修改 obj.text 的值时，会触发字段 obj.text 的设置操作；
 * 响应式数据的实现思路:
 *  拦截一个对象的读取和设置操作
 *  当读取字段 obj.text 时，把副作用函数 effect 存储到一个桶里
 *  当设置字段 obj.text 时，再把副作用函数 effect 从桶里取出并执行即可
 */
;(function () {
    // 存储副作用函数的桶
    const bucket = new Set()

    // 原始数据
    const data = {text: 'hello world'}
    // 对原始数据的代理
    const ojb = new Proxy(data, {
        // 拦截读取操作
        get(target, key) {
            // 将副作用函数 effect 添加到存储副作用函数的桶中
            bucket.add(effect)
            console.log(bucket)
            return target[key]
        },
        // 拦截设置操作
        set(target, key, newVal) {
            // 设置属性值
            target[key] = newVal
            // 把副作用函数从桶里取出并执行
            bucket.forEach(fn => fn())
            //返回 true 代表设置操作成功
            return true
        }
    })

    // 副作用函数
    function effect() {
        document.body.innerText = obj.text
    }

    // 执行副作用函数
    effect()

    setTimeout(() => {
        obj.text = 'hello world'
    }, 1000)

})()
